<template>
	<s-layout class="wallet-wrap" title="我的积分">
		<!-- 积分卡片 -->
		<view class="header-box ss-flex ss-row-center ss-col-center">
			<view class="card-box ui-BG-Main ui-Shadow-Main">
				<view class="card-head ss-flex ss-col-center">
					<view class="card-title ss-m-r-10">我的积分</view>
					<view
							@tap="state.showScore = !state.showScore"
							class="ss-eye-icon"
							:class="state.showScore ? 'cicon-eye' : 'cicon-eye-off'"
					></view>
				</view>
				<view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
					<view class="money-num">{{ state.showScore ? '积分 ' + userInfo.score : '*****' }}</view>
				</view>
			</view>
		</view>

		<view>
			<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
			<!-- 钱包记录 -->
			<view v-if="state.pagination.total > 0">
				<view
						class="wallet-list ss-flex border-bottom"
						v-for="item in state.pagination.data"
						:key="item.id"
				>
					<view class="list-content">
						<view class="title-box ss-flex ss-row-between ss-m-b-20">
							<text v-if="!sheep.$helper.isRealEmpty(item.remark)" class="title ss-line-1"
							>{{ item.remark }}</text>
							<view class="money">
								<text v-if="item.score >= 0" class="add">+{{ item.score }}</text>
								<text v-else class="minus">{{ item.score }}</text>
							</view>
						</view>
						<text class="time">时间: {{ item.createTime }} / 变动后积分: {{ item.currentScore }}</text>
					</view>
				</view>
			</view>
			<uni-load-more
					v-if="state.pagination.total > 0"
					:status="state.loadStatus"
					:content-text="{
        contentdown: '上拉加载更多',
      }"
			/>
		</view>
	</s-layout>
</template>

<script setup>
import { computed, watch, reactive } from 'vue';
import {onLoad, onReachBottom, onShow} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import dayjs from 'dayjs';
import _ from 'lodash';

const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');

// 数据
const state = reactive({
	showScore: true,
	date: [],
	currentTab: 0,
	pagination: {
		data: [],
		page: 1,
		total: 0,
		size: 10
	},
	loadStatus: '',
	today: '',
});

const tabMaps = [
	/*{
		name: '全部',
		value: 'all',
	},*/
	/*    {
				name: '佣金',
				value: 'income',
			},*/
	/*{
		name: '充值记录',
		value: 'expense',
	},*/
	/*{
		name: '购物',
		value: 'expense',
	},
	{
		name: '运费',
		value: 'expense',
	},*/
];
const userInfo = computed(() => sheep.$store('user').userInfo);

const dateFilterText = computed(() => {
	if (state.date[0] === state.date[1]) {
		return state.date[0];
	} else {
		return state.date.join('~');
	}
});

async function getLogList() {
	state.loadStatus = 'loading';
	let res = await sheep.$api.user.wallet.score({
		pageNum: state.pagination.page,
		pageSize: state.pagination.size
	});
	const {rows, total} = res;
	state.pagination.data = _.concat(state.pagination.data, rows);
	state.pagination.total = total
	// 判断是否还有下一页
	if (state.pagination.total <= state.pagination.data.length) {
		state.loadStatus = 'noMore';
	} else {
		state.loadStatus = 'more';
		state.pagination.page++;
	}
}
onLoad(async (options) => {
	state.today = dayjs().format('YYYY-MM-DD');
	state.date = [state.today, state.today];
	getLogList();
	sheep.$store('app').init();
});

onShow(() => {
	sheep.$store('app').init();
});

function onChange(e) {
	state.pagination = pagination;
	state.currentTab = e.index;
	getLogList();
}

function onChangeTime(e) {
	state.date[0] = e[0];
	state.date[1] = e[e.length - 1];
	state.pagination = pagination;
	getLogList();
}

function appendTimeHMS(arr) {
	return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
}

onReachBottom(() => {
	if (state.loadStatus !== 'noMore') {
		getLogList(state.pagination.current_page + 1);
	}
});
</script>

<style lang="scss" scoped>
// 钱包
.header-box {
	background-color: $white;
	padding: 30rpx;

	.card-box {
		width: 100%;
		min-height: 300rpx;
		padding: 40rpx;
		background-size: 100% 100%;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
		box-sizing: border-box;

		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			background: v-bind(headerBg)
			no-repeat;
			pointer-events: none;
		}

		.card-head {
			color: $white;
			font-size: 30rpx;
		}

		.ss-eye-icon {
			font-size: 40rpx;
			color: $white;
		}

		.money-num {
			font-size: 70rpx;
			line-height: 70rpx;
			font-weight: 500;
			color: $white;
			font-family: OPPOSANS;
		}

		.reduce-num {
			font-size: 26rpx;
			font-weight: 400;
			color: $white;
		}

		.topup-btn {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30px;
			font-size: 26rpx;
			font-weight: 500;
			background-color: $white;
			color: var(--ui-BG-Main);
		}
	}
}

// 筛选

.filter-box {
	height: 114rpx;
	background-color: $bg-page;

	.total-box {
		font-size: 24rpx;
		font-weight: 500;
		color: $dark-9;
	}

	.date-btn {
		background-color: $white;
		line-height: 54rpx;
		border-radius: 27rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: $dark-6;

		.ss-seldate-icon {
			font-size: 50rpx;
			color: $dark-9;
		}
	}
}

.tabs-box {
	background: $white;
	border-bottom: 2rpx solid #eeeeee;
}

// tab
.wallet-tab-card {
	.tab-item {
		height: 80rpx;
		position: relative;

		.tab-title {
			font-size: 30rpx;
		}

		.cur-tab-title {
			font-weight: $font-weight-bold;
		}

		.tab-line {
			width: 60rpx;
			height: 6rpx;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 2rpx;
			background-color: var(--ui-BG-Main);
		}
	}
}

// 钱包记录
.wallet-list {
	padding: 30rpx;
	background-color: #ffff;

	.head-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background: $gray-c;
	}

	.list-content {
		justify-content: space-between;
		align-items: flex-start;
		flex: 1;

		.title {
			font-size: 28rpx;
			color: $dark-3;
			width: 400rpx;
		}

		.time {
			color: $gray-c;
			font-size: 22rpx;
		}
	}

	.money {
		font-size: 28rpx;
		font-weight: bold;
		font-family: OPPOSANS;
		.add {
			color: #000000;
		}

		.minus {
			color: $red;
		}
	}
}
</style>
